<template lang="pug">
  div
    form-box(
      ref="basicForm"
      :fields="basicFields"
      :showBtns="false"
      size="large"
      labelWidth="120px"
      :layoutCol="{ sm: 8, md: 8, lg: 8 }"
    )
    edit-table(:column="column" v-model="projects")
    .sumBox.tr
      p
        span
          span 总计：
          b.c_error.f24 {{totalAmount}}元
        span.ml30
          span 实收:
          el-input-number(controls-position="right" v-model="actrualCharge")
        span.ml30
          span 找零：
          b {{totalAmount}}元
      el-input.textarea(type="textarea" v-model="info.remark" :rows="4" placeholder="备注" maxlength="30" show-word-limit)
      p.mt40
        el-button(size="large" round @click="cancelHandle") 取消
        el-button.gradientVertical(size="large" round @click="() => saveHandle()") 保存
</template>
<script>
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'
import EditTable from '@/components/Basic/EditTable'
import { getClassesByArea } from '@/api/common'
import { multiply } from '@/utils/number'
import { columnProjects } from './config'

export default {
  components: {
    EditTable
  },
  data () {
    return {
      info: {
        remark: '' // 备注
      },
      totalAmount: 0, // 总计
      classes: [],
      projects: [],
      actrualCharge: 0 // 实收
    }
  },
  computed: {
    ...mapGetters(['user', 'curArea']),
    id () {
      return this.$route.query.id
    },
    basicFields () {
      const { info, user } = this
      return [
        {
          key: 'id',
          label: '收费记录单号',
          type: 'text',
          initialValue: info.id
        },
        {
          key: 'createName',
          label: '经手人',
          type: 'text',
          initialValue: info.createName || user.realName
        },
        {
          key: 'status',
          label: '基本状态',
          type: 'text',
          initialValue: info.status || '有效'
        },
        {
          key: 'createDate',
          label: '收费记录单号',
          type: 'text',
          initialValue: info.createDate || dayjs().format('YYYY/MM/DD')
        },
        {
          key: 'classesId',
          label: '选择班级',
          type: 'select',
          initialValue: info.classesId,
          fieldProps: {
            options: [{ id: '1', name: '现金' }]
          }
        },
        {
          key: 'childrenId',
          label: '选择学生',
          type: 'select',
          initialValue: info.childrenId,
          fieldProps: {
            options: [{ id: '1', name: '现金' }]
          }
        },
        {
          key: 'chargeType',
          label: '收费方案',
          type: 'select',
          initialValue: info.chargeType,
          fieldProps: {
            options: [{ id: '1', name: '现金' }]
          }
        },
        {
          key: 'duration',
          label: '学期',
          type: 'select',
          initialValue: info.duration,
          fieldProps: {
            options: [{ id: '1', name: '现金' }]
          }
        },
        {
          key: 'name',
          label: '转账凭证编号',
          initialValue: info.name
        },
        {
          key: 'client',
          label: '单据注脚',
          type: 'slot',
          initialValue: info.client,
          layoutCol: { sm: 24, md: 24, lg: 24 }
        }
      ]
    },
    column () {
      const { id } = this
      return columnProjects(id)
    }
  },
  watch: {
    projects (val) {
      console.log(val)
      this.totalAmount = val.reduce((sum, cur) => {
        return sum + multiply(cur.price || 0, cur.number || 0)
      }, 0)
    }
  },
  methods: {
    // 获取账单信息
    async getData () {},
    // 获取班级列表
    getClassList () {
      const { curArea } = this
      getClassesByArea({ areaId: curArea.areaId, category: 1 }).then(res => {
        this.classes = res || []
      })
    },
    // 取消
    cancelHandle () {
      this.$confirm('您有未保存的信息,是否确认退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.go(-1)
      })
    },
    async saveHandle () {
      const { clients, projects, info, totalAmount } = this
      const values = this.$refs.basicForm.submitForm()
      const params = {
        clients,
        projects,
        ...values,
        remark: info.remark,
        totalAmount
      }
      console.log(params)
    }
  }
}
</script>
<style lang="scss" scoped>
.sumBox{
  margin-top: 40px;

  .textarea{
    width: 40%;
    max-width: 720px;
    margin-top: 24px
  }
}
</style>
